<template>
    <nav>
        &#x3000;<span class="glyphicon glyphicon-menu-hamburger" @click="showMenu"></span> &#x3000;
        <span><slot></slot></span>
    </nav>
</template>

<script>
    import  '../assets/bootstrap/css/bootstrap.css';
    import bus from './bus.js'
    export default {
        name: 'navBar',
        data: function () {
            return {
            }
        },
        methods:{
            showMenu:function(){
                bus.$emit('showMenu');
            }
        }
    }

</script>

<style scoped>
    nav{
        background-color: black;
        height: 64px;
        width:100%;
        color: white;
        padding: 17px;
        position:fixed;
        top:0;
        left:0; 
    }
    span{
        font-size: 30px;
        line-height:100%;
    }
</style>